<template>
  <div class="merits-box">
    <header>
        <el-select v-model="value" class="m-2" placeholder="选择门店">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
       </el-select>
       <el-button type="primary" @click="handleKpi(value)">查询</el-button>
      <el-button text @click="dialogFormVisible = true">新增</el-button>

      <el-dialog v-model="dialogFormVisible" title="填写KPI信息">
            <el-form :model="tableData">
              <el-form-item 
                 label="填写人" 
                 :label-width="formLabelWidth">
                <el-input v-model="tableData.name" autocomplete="off" />
              </el-form-item>
              <el-form-item 
                 label="填写时间" 
                 :label-width="formLabelWidth">
                <el-input v-model="tableData.updatedAt" autocomplete="off" />
              </el-form-item>
              <el-form-item 
                 label="门店" 
                 :label-width="formLabelWidth"
                 :rules="[
                        { required: true, message: '请选择门店' },
                      ]"
                >
                <el-select v-model="value" class="m-2" placeholder="选择门店信息">
                   <el-option
                     v-for="item in options"
                    :key="item.value"
                     :label="item.label"
                     :value="item.value"
                   />
                </el-select>
              </el-form-item>
              <el-form-item 
                 label="工作进度" 
                 :label-width="formLabelWidth" 
                 :rules="[
                        { required: true, message: '请输入进度' },
                      ]"
                 >
                <el-progress :text-inside="true" :stroke-width="15" :percentage="tableData.checkProgress" />
              </el-form-item>
              <el-form-item 
                  label="自评分"
                  :label-width="formLabelWidth" 
                  :rules="[
                         { required: true, message: '请输入自评分'},
                       ]"
                  >
                <el-progress :text-inside="true" :stroke-width="15" :percentage="tableData.storeProgress" />
              </el-form-item>
              <el-form-item 
                  label="内容" 
                  :label-width="formLabelWidth" 
                  :rules="[
                         { required: true, message: '请输入备注'},
                       ]"
                  >
                <el-input
                  v-model="tableData.remark"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="Please input"
                />
              </el-form-item>

            </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">
                    确定
                  </el-button>
                </span>
              </template>
       </el-dialog>
    </header>
    <main>
        <el-table :data="state.meritsData" style="width: 100%">
          <el-table-column prop="user_name" label="填写人" width="120" />
          <el-table-column prop="shop_name" label="所属门店" width="150" />
          <el-table-column prop="time" label="填写时间" width="300" />
          <el-table-column prop="progress" label="工作进度" width="100" />
          <el-table-column prop="score" label="评分" width="100" />
          <el-table-column prop="content" label="内容" width="400" />
          <el-table-column fixed="right" label="操作" width="100" >
            <template #default="scope">
                <span class="edit" text @click="meritsClick(scope.row)">编辑</span>
            </template>
          </el-table-column>
        </el-table>
    </main>
  </div>
</template>

<script setup>
import { ref ,reactive} from 'vue'
import { shopMeritsList } from '@/apis/shop'
const value = ref('')
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
   const tableData = [
           {
             name: '系统管理员',
             shop_name: '乐多便利店',
             updatedAt: "2022-12-19",
             checkProgress: 88.8,
             storeProgress: 86.76,
             remark: "片区的便利店，人员比较多"
           },
           {
             name: '系统管理员',
             shop_name: '高新区一分店',
             updatedAt: "2022-12-19",
             checkProgress: 88.8,
             storeProgress: 86.76,
             remark: "片区的便利店，人员比较多"
           },
           {
             name: '系统管理员',
             shop_name: '高新区二分店',
             updatedAt: "2022-12-19",
             checkProgress: 88.8,
             storeProgress: 86.76,
             remark: "片区的便利店，人员比较多"
           },
           {
             name: '系统管理员',
             shop_name: '乐多便利店',
             updatedAt: "2022-12-19",
             checkProgress: 88.8,
             storeProgress: 86.76,
             remark: "片区的便利店，人员比较多"
           },
        ]
    const options = [
       {
         value: '开心便利店',
         label: '开心便利店',
       },
       { 
         value: '高新区一分店',
         label: '高新区一分店',
       },
       {
         value: '高新区',
         label: '高新区',
      },
       {
         value: '乐多便利店',
         label: '乐多便利店',
       },
       {
         value: '成都总店',
         label: '成都总店',
       },
     ]
     //绩效列表数据
     const state = reactive({
        meritsData:[],
        data:[],
        query:[]
     })
    
    // 获取kpi列表数据
     const meritsGet = async () => {
        const result = await shopMeritsList({page:1,size:10})
        state.meritsData = result.data.rows
     }
     meritsGet() 
    //定义一个存储数据的变量
  
     const meritsClick = (row) => {
      dialogFormVisible.value = true
      state.data = row
     }
    //查询打卡
    function handleKpi(value) {
    console.log(value)
    state.query = state.meritsData.filter(item => {
      if(item.shop_name === value){
        return item
      }
    })
    state.meritsData = state.query
    console.log(state.query)
   }
    
</script>

<style lang="less" scoped>
    header{
    display: block;
    width: 100%;
    height: 80px;
    text-align: right;
    line-height: 80px;
    border-bottom:1px solid #ddd ;
    button{
      margin: 12px;
    }
   }
   main{
    height: 100%;
    background-color: #fff;
    padding: 8px 12px;
   }
   .edit{
    color: #1890ff;
    cursor: pointer;
   }
    .el-progress {
      margin-bottom: 15px;
      width: 350px;
    }
  /deep/ .el-dialog .el-dialog__header{
     text-align: left;
     line-height: 0;
   }
   /deep/ .el-form-item__content{
    line-height: 32px;
   }

   /deep/ .el-progress{
    margin-bottom: 0px
   }

   /deep/ .el-form-item label{
    width:54px;
   }
  /deep/ #el-id-360-8{
    width:54px;
  }
   
</style>
